<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import {onMounted} from "vue";



import {Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer} from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";


// 服务器上托管 CesiumJS 静态文件的 URL。
window.CESIUM_BASE_URL = '/Cesium';
// 您的访问令牌可在以下位置找到：https://ion.cesium.com/tokens。
// 将“your_access_token”替换为您的铯离子访问令牌。
Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjJhZWE3NC1iYjY2LTQwZjAtODc0YS0zZTdlMjRmNTE5ZDEiLCJpZCI6MjA1NjY1LCJpYXQiOjE3MTE5MzExMzB9.efKdT634nrROZLOR-GmU5gvPmnlCDsiHDTkCYlU4SXA';

onMounted(async () => {
  // 使用 'cesiumContainer' ID 初始化 HTML 元素中的 Cesium Viewer。
  const viewer = new Viewer('cesiumContainer', {
    terrain: Terrain.fromWorldTerrain(),
  });

  // 在给定的经度、纬度和高度处将相机飞到昆明。
  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(102.821, 24.885, 5000),
    orientation: {
      heading: CesiumMath.toRadians(0), // 方向
      pitch: CesiumMath.toRadians(-90), // 倾斜角度
      // roll: 0,
    }
  });

  // 添加 Cesium OSM Buildings，这是一个全局 3D 建筑图层。
  const buildingTileset = await createOsmBuildingsAsync();
  viewer.scene.primitives.add(buildingTileset);
})
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
